這兩個名詞在專職前端的朋友基本上都很熟悉

但剛接觸應該會各種疑惑

這裡有兩篇文可以讓各位閱讀

1. Debounce & Throttle — 那些前端開發應該要知道的小事(一)
2. [有趣面試題] 網頁效能問題改善之 Debounce & Throttle

簡單來說這兩個就是省流量

假設有使用者一秒狂點 10 次，甚至開連點程式來點到 100+ 次

兩者的差異也很簡單來說如下

• throttle : 從第一次點擊開始會先觸發一次，後續不管狂點還是怎麼樣，一定只在設定的期間才定期發出要求
• debounce : 假設延遲設定為 1 秒，只要最後一次點擊後的 1 秒內沒有再次點擊才會發出要求

各位在後台使用的搜尋，都有使用到 debounce 的概念

因為總不可能每次輸入就從新搜尋一次，沒有意義且浪費流量，造成伺服器更大的壓力

而 throttle 則是出現在 Char 的欄位，讓輸入變更會有暫存的效果

// addons/mail/static/src/js/field_char.js
FieldChar.include({

    //--------------------------------------------------------------------------
    // Public
    //-------------------------------------------------------------------------

    /**
     * Support a key-based onchange in text field. In order to avoid too much
     * rpc to the server _triggerOnchange is throttled (once every second max)
     *
     */
    init: function () {
        this._super.apply(this, arguments);
        this._triggerOnchange = _.throttle(this._triggerOnchange, 1000, {leading: false});
    },
		
		// ...
}

這兩個額外知識推薦給各位

不管是網頁效能或是節省流量上都有幫助

但這個使用上可能需要溝通，因筆者有遇到使用者嫌棄延遲

連一秒都不願意等的那種，要求即輸入即顯示結果

設定延遲時間這件事也是個難題阿